<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>svg画天气趋势图</title>
        <style>
        	svg{
				border:1px solid blue;
				margin:20px auto;
				display:block;
			}
        </style>
    </head>
    <body>
    	<svg xmlns="http://www.w3.org/2000/svg" width="680" height="70">
    		<circle cx="20" cy="40" r="3" fill="#f40" />
    		<circle cx="100" cy="60" r="3" fill="#f40" />
    		<circle cx="160" cy="10" r="3" fill="#f40" />
    		<circle cx="250" cy="35" r="3" fill="#f40" />
    		<!-- <path d="M 20 40 L 100 60 L 160 10 L 250 35" fill="none" stroke="#f68227" stroke-width="2" /> -->
    		<polyline points="20 40 100 60 160 10 250 35" fill="none" stroke="#f68227" stroke-width="2" />
    	</svg>
    </body>
</html>